
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never" >
        <el-row type="flex" justify="space-between" align="middle">
          <el-col :span="1">关键字</el-col>
          <el-col :span="6">
            <el-input
              v-model="params.keyword"
              placeholder="根据编号搜索"
            ></el-input>
          </el-col>
          <el-col :span="17" style="text-align: right">
            <el-button size="small" @click="removeQuestion">清除</el-button>
            <el-button size="small" type="primary" @click="search">搜索</el-button
            >
          </el-col>
        </el-row>
      <!-- 提示信息 -->
      <el-alert  :closable="false" :title="`数据一共 ${total} 条`" type="info" show-icon></el-alert>
      <template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="编号"
      width="240">
    </el-table-column>
    <el-table-column
    label="题型"
    prop="questionType"
    width="120">
    <template #default="{ row }">
      {{ employeeEnum[row.questionType] }}
            </template>
    </el-table-column>
    <el-table-column
      prop="questionIDs"
      label="题目编号"
      width="240">
      <template #default="{ row }">
          <div v-for="(item, index) in row.questionIDs" :key="index">
            <p class="From-surface" @click="preview(item)">
                {{ item.number }}
            </p>
          </div>
              </template>
    </el-table-column>
    <el-table-column
      prop="addTime"
      label="录入时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="totalSeconds"
      label="答题时间(s)"
      width="180">
    </el-table-column>
    <el-table-column
      prop="accuracyRate"
      label="正确率(%)"
      >
    </el-table-column>
    <el-table-column
      prop="userName"
      label="录入人"
      >
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      >
      <template #default="{row}">
        <el-button
         type="danger"
         circle icon="el-icon-delete"
          plain
          size="mini"
          @click="Delete(row)"
          ></el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页器导航 -->
  <!-- 分页器 -->
        <!-- layout：用于控制分页器布局的 -->
        <!-- current-page：当前是第几页 -->
        <!-- page-size：每页显示多少条数据 -->
        <!-- total：总条数 -->
  <el-pagination
      style="float:right;padding:10px"
      @size-change="handleSizeChange"
      :page-sizes="[20, 30, 50,100]"
      background
      layout="prev, pager, next,sizes, jumper"
      :total="total">
    </el-pagination>
  </template>
  </el-card>
    <questions-preview
        :dialogVisible="dialogVisible"
        @dialog-close="dialogClose"
        :Topicpreview="Topicpreview"
      ></questions-preview>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  components: {
    QuestionsPreview
  },
  data () {
    return {
      // 总条数
      total: 0,

      // 列表数据
      tableData: [],
      // 分页参数
      params: {
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      // 枚举
      employeeEnum: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      // 组件显示隐藏
      dialogVisible: false,
      // 题目预览数据
      Topicpreview: {}
    }
  },
  methods: {
    async randoms () {
      const { data: res } = await randoms({ page: this.page })
      console.log(res)
      this.tableData = res.items
      this.total = res.counts
    },
    // 分页
    handleSizeChange (pagesize) {
      this.pagesize = pagesize
      this.created()
    },
    // 搜索按钮
    async search () {
      const { data: res } = await randoms({ keyword: this.params.keyword })
      this.tableData = res.items
      this.total = res.counts
      // 重置表单
      // this.$refs.form.resetFields()
      console.log(res)
    },
    // 清除按钮
    removeQuestion () {
      this.params.keyword = ''
    },
    // 组题删除
    Delete (data) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms(data)
        this.$message.success('删除成功')
        this.randoms()
      })
    },
    // 弹窗
    async preview (data) {
      try {
        this.dialogVisible = true
        const res = await detail(data)
        this.Topicpreview = res.data
      } catch (error) {
        console.log(error)
      }
    },
    // 关闭弹窗
    dialogClose () {
      this.dialogVisible = false
    }
  },
  created () {
    this.randoms()
  }

}

</script>
<style scoped>
.From-surface {
  color: #09f;
  line-height: 10px;
  cursor: pointer;
}
</style>
